<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="预览" width="750px" showFooter @ok="handleSubmit">
    <DiyFormRender :config="config" :fixed-form-schema="fixedFormSchema" ref="renderPage" >
      <template #test="{ model, field }">
        <span>测试: {{ model[field] }}</span>
      </template>
    </DiyFormRender>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { useMessage } from "/@/hooks/web/useMessage"
  import DiyFormRender from "/@/views/diyDesigner/render-page/DiyFormRender.vue"
  const { createMessage } = useMessage()
  import { FormSchema } from "/@/components/Form/index"
  const renderPage = ref<any>()
  const emit = defineEmits(["register", "success"])
  const config = ref()
  const fixedFormSchema : FormSchema[] = [
    {
      label: '固定item',
      field: "submitCount",
      component: "Input",
      slot: 'test',
      componentProps: {
        maxlength: 20,
      },
    },
  ]
  const [register, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    config.value = data.config
    setDrawerProps({})
  })

  const handleSubmit = async () => {
    const values = await renderPage.value.getValues()
    console.log(values)
    createMessage.success('提交成功, 请查看控制台')
  }
</script>
